<template>
    <div class="">
        <ELTable v-bind="configTable" ref="tableRef">
            <template #search="{ searchSubmit, params }">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input v-model="params.key" placeholder="请输入关键字" />
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="searchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
            <template #buttons="{ deleteAllHandle }">
                <div>
                    <el-button type="primary" @click = "add" >添加</el-button>
                </div>
            </template>
            <template #operate="{ scope, delrow }">
                <div>
                    <el-button type="primary" @click="change(scope.row)" >修改</el-button>
                    <el-button type="danger" @click="delrow(scope.row.id)">删除</el-button>
                </div>
            </template>
        </ELTable>
        <adminAdd v-if="showAdd" :inner="inner" @close="houseClose" @add="adding"></adminAdd>
    </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive } from "vue"
import ELTable, { TableType } from "../../components/ELTable.vue";
import { administratorlist, administratordelete, administratoradd } from '../../service/administrator/administrator'
import adminAdd from "../../components/adminAdd.vue";
import { column } from './administrator'

const showAdd = ref(false)
const houseClose = () => {
    showAdd.value = false
}
const inner = ref({})
const change = (val: object) => {
    console.log(val)
    inner.value = val
    showAdd.value = true
}
const configTable: TableType = reactive({
    column: column,
    isSelection: true,
    loadData: administratorlist,
    delDate: administratordelete,
    searchParams: {
        state: 0
    }
})
const tableRef = ref()
const adding = ()=>{    
    showAdd.value = false
    tableRef.value.searchSubmit()
}
const add = ()=>{
    showAdd.value = true
}
</script>

<style scoped></style>
